var ModelListPanel=Ext.extend(Ext.Panel,{
	//closable:true,
	miniImg:new Image(),
	showPage:function(){
		var pnl=this;
		this.miniImg.src=this.imgSrc;
		this.store.load({	
			 params:{
					gid : gid,
					vid : vid
				},
			callback : function(r, options, success) {
				if (success == false) {
					Ext.Msg.alert("系统消息","加载数据失败，无对应数据或者系统出现异常！");
				} else {
					var canvas = document.getElementById(pnl.canvasId);
					var ctx = canvas.getContext('2d');
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					pnl.drawModelMiniImgList(ctx,pnl.store);
					canvas.onclick=function(event){
						var x=event.layerX-pnl.margin;
						var y=event.layerY-pnl.margin;
						
						var index=Math.floor(y/pnl.imgHeight)*pnl.column+Math.floor(x/pnl.imgWidth);//点击到的缩略图的索引
						var right=(index%pnl.column)*pnl.imgWidth+pnl.miniImg.width;//点击到的缩略图的右边x坐标
						var bottom=Math.floor(index/pnl.column)*pnl.imgHeight+pnl.miniImg.height;	//点击到的缩略图的底部的y坐标
						
						if(index>pnl.store.getCount()){
							return;
						}else if(x>right || y>bottom){
							return;
						}
						pnl.onClickImg(index,pnl);
					};
				}
			}
		});
	},
	drawModelMiniImgList:function(ctx){
		ctx.font = "10pt Arial";
		ctx.textBaseline = "top"; // 设置文字垂直对齐方式
		ctx.textAlign = "center"; // 设置文字水平对齐方式	
		
		for(var i=0;i<this.store.getCount();i++){
			var record=this.store.getAt(i);
			ix=(i%this.column)*this.imgWidth+this.margin;
			iy=Math.floor(i/this.column)*this.imgHeight+this.margin;
			ctx.drawImage(this.miniImg,ix,iy,this.miniImg.width,this.miniImg.height);
			ctx.fillText(record.get(this.displayName), ix+this.miniImg.width/2,iy+this.miniImg.height);
		}
	},
	imgWidth:100,	//每个图标占的宽度
	imgHeight:80,	//每行图标占的高度
	column:8,		//每行的图标个数
	margin:15		//边缘空出的距离
});

